<template>
  <div class="vue-component-container">
    <div
      class="component-item"
      v-for="(chart, index) in chartComponents"
      :key="chart.name"
    >
      <img v-if="chart.img" :src="chart.img" width="420px" alt="" />
      <component v-else :is="chart.component" />
      <h3>{{ index + 1 }}. {{ chart.label || "Vue组件" }}</h3>
    </div>
  </div>
</template>

<script setup>
import VueComponent01 from "./components/vueComponent01.vue";
import VueComponent02 from "./components/vueComponent02.vue";
import VueComponent03 from "./components/vueComponent03.vue";
import VueComponent04 from "./components/vueComponent04.vue";
import VueComponent05 from "./components/vueComponent05.vue";
import VueComponent06 from "./components/vueComponent06.vue";
import VueComponent07 from "./components/vueComponent07.vue";
import ball2Img from '@/components/vue-common/images/ball2/ball2.jpg';

const chartComponents = [
  { name: "VueComponent01", component: VueComponent01, label: "Vue组件" },
  { name: "VueComponent02", component: VueComponent02, label: "无刻度仪表盘" },
  { name: "VueComponent03", component: VueComponent03, label: "排行榜" },
  { name: "VueComponent04", component: VueComponent04, label: "排行榜" },
  { name: "VueComponent05", component: VueComponent05, label: "排行榜" },
  { name: "VueComponent06", component: VueComponent06, label: "3D旋转球", img: ball2Img },
  { name: "VueComponent07", component: VueComponent07, label: "3D旋转球" },
];
</script>

<style scoped lang="less">
.vue-component-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 30px;
}
.component-item {
  position: relative;
  width: 500px;
  height: 400px;
  background-color: #fff;
  img {
    display: block;
    margin: 0 auto;
  }
}
.component-item h3 {
  position: absolute;
  left: 16px;
  bottom: 5px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
}
</style>